<template>
  <div class="cs-page-container">

    <div class="cs-filter-container">
      <el-input
        v-model.trim="listQuery.userId"
        clearable
        placeholder="请输入用户ID"
        style="width:120px"
      />
      <el-select
        v-model="listQuery.type"
        filterable
        placeholder="审核类型"
        style="width:120px"
      >
        <el-option label="未审核" :value="0" />
        <el-option label="真人通过" :value="1" />
        <el-option label="女神通过" :value="2" />
        <el-option label="未通过" :value="3" />
      </el-select>
      <el-select
        v-model="listQuery.countryCode"
        clearable
        filterable
        placeholder="国家"
        style="width:100px"
      >
        <el-option
          v-for="(value, key, index) in countryCodeItem"
          :key="index"
          :label="value"
          :value="key"
        />
      </el-select>
      <el-select
        v-model="listQuery.gender"
        filterable
        placeholder="性别"
        style="width:80px"
      >
        <el-option label="未知" :value="0" />
        <el-option label="男" :value="1" />
        <el-option label="女" :value="2" />
      </el-select>
      <el-date-picker
        v-model="daterangeValue"
        :picker-options="daterangePickerOptions"
        type="daterange"
        align="right"
        unlink-panels
        range-separator="至"
        start-placeholder="创建起始时间"
        end-placeholder="创建结束时间"
        value-format="yyyy-MM-dd"
        @change="daterangeChanged"
      />
      <el-button
        type="primary"
        size="small"
        icon="el-icon-search"
        @click="handleFilter"
      >搜索</el-button>
      <el-button
        type="info"
        size="small"
        icon="el-icon-refresh-right"
        @click="resetFilter"
      >重置</el-button>
      <el-button
        type="primary"
        size="small"
        @click="requestFullScreen"
      >全屏审核</el-button>
    </div>

    <div class="cs-filter-result audit-box">
      <el-table
        v-loading="listLoading"
        :data="list"
        :height="isFullScreen ? '100vh' : 'calc(100vh - 250px)'"
        :row-key="row => row.recordId + row.applyTime"
        border
        fit
        size="small"
        highlight-current-row
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading"
      >
        <el-table-column
          v-if="!isFullScreen"
          align="center"
          label="用户ID"
          prop="userId"
        >

          <template slot-scope="{ row }">
            <TooptipsCom :user-id="row.userId" />
          </template>
        </el-table-column>
        <el-table-column
          v-if="!isFullScreen"
          align="center"
          label="昵称"
        >
          <template slot-scope="{ row }">{{ row.nickname }}</template>
        </el-table-column>
        <el-table-column
          v-if="!isFullScreen"
          align="center"
          label="年龄"
        >
          <template slot-scope="{ row }">{{ row.age }}</template>
        </el-table-column>
        <el-table-column
          v-if="!isFullScreen"
          align="center"
          label="性别"
        >
          <template slot-scope="{ row }">{{ genderItems[row.gender] }}</template>
        </el-table-column>
        <el-table-column align="center" label="国家" width="130">
          <template slot-scope="{ row }">{{ row.countryCode | countryCode }}</template>
        </el-table-column>
        <el-table-column
          align="center"
          label="头像"
        >
          <template slot-scope="{ row }">
            <image-tooltip :image-id="row.avatar">
              <img
                v-if="row.avatar"
                slot="img"
                :src="row.avatar"
                width="100"
                @click="zoomImage(row.avatar)"
              >
            </image-tooltip>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="封面"
        >
          <template slot-scope="{ row }">
            <image-tooltip :image-id="row.backgroundImage">
              <img
                v-if="row.backgroundImage"
                slot="img"
                :src="row.backgroundImage"
                width="100"
                @click="zoomImage(row.backgroundImage)"
              >
            </image-tooltip>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="认证照片"
        >
          <template slot-scope="{ row }">
            <image-tooltip :image-id="row.liveImage">
              <img
                v-if="row.liveImage"
                slot="img"
                :src="row.liveImage"
                width="100"
                @click="zoomImage(row.liveImage)"
              >
            </image-tooltip>
          </template>
        </el-table-column>
        <el-table-column
          v-if="!isFullScreen"
          align="center"
          label="提审时间"
          min-width="140"
        >
          <template slot-scope="{ row }">{{ row.applyTime | parseTime }}</template>
        </el-table-column>

        <el-table-column
          v-if="!isFullScreen"
          align="center"
          label="审核状态"
        >
          <template slot-scope="{ row }">
            <span>{{ row.status | filterStatus(row.goddessStatus) }}</span><br>
            <span v-if="row.status !== 0">{{ row.autoLive === 1 ? '自动认证' : '人工认证' }}</span>
          </template>
        </el-table-column>

        <el-table-column
          align="center"
          label="操作"
          fixed="right"
          min-width="120px"
        >
          <template slot-scope="scope">
            <div class="btn-box">
              <el-button
                v-if="scope.row.status === 0"
                type="primary"
                size="mini"
                @click="onVerify(scope, '0')"
              >真人通过</el-button>
              <el-button
                v-if="scope.row.goddessStatus === 0 && scope.row.gender === 2"
                type="primary"
                size="mini"
                @click="onVerify(scope, '1')"
              >女神通过</el-button>
              <el-button
                v-if="scope.row.goddessStatus === 0 && scope.row.status === 0"
                type="danger"
                size="mini"
                @click="onVerify(scope, '2')"
              >不通过</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <TablePagination
        :current-page="listQuery.page"
        :limit="listQuery.limit"
        :total="total"
        :loading="listLoading"
        @handleSizeChange="handleSizeChange"
        @handleCurrentChange="handleCurrentChange"
      />
      <ImageViewer
        :visible.sync="showImage"
        :url="imageUrl"
      />
    </div>
  </div>
</template>

<script>
import TablePagination from '@/components/TablePagination'
import ImageViewer from '@/components/ImageViewer'
import { xhrAnchorAuthList, xhrAnchorVerify } from '@/api/anchor'
import AnchorMixin from './mixin'
import { getCountryItem } from '@/filters'
export default {
  name: 'RoleList',
  components: { TablePagination, ImageViewer },
  filters: {
    filterStatus(status, gStatus) {
      if (status === 0 && gStatus === 0) {
        return '未认证';
      }
      if (status === 1 && gStatus === 1) {
        return '真人、女神认证';
      }
      if (status === 1 && gStatus === 0) {
        return '真人认证';
      }
      if (status === 2 && gStatus === 2) {
        return '未通过';
      }
    }
  },
  mixins: [AnchorMixin],
  data() {
    return {
      list: [],
      genderItems: { 0: '未知', 1: '男', 2: '女' },
      total: 0,
      listQuery: {
        page: 1,
        type: 0,
        gender: null,
        limit: 100
      },
      userAddress: {},
      daterangeValue: '',
      showImage: false,
      imageUrl: '',
      isFullScreen: false,
      countryCodeItem: getCountryItem()
    }
  },
  created() {
    this.doSearch()
  },
  mounted() {
    document.querySelector('.audit-box').onfullscreenchange = (e) => {
      if (document.fullscreenElement === e.target) {
        this.isFullScreen = true
      } else {
        this.isFullScreen = false
      }
    }
  },
  methods: {
    doSearch() {
      if (!this.validateParams(this.listQuery)) {
        return
      }
      this.handleCheckedStatus()
      xhrAnchorAuthList(this.listQuery)
        .then(resp => {
          this.list = resp.data.list
          this.total = resp.data.total
          if (resp.data.userAddress){
            this.userAddress = resp.data.userAddress
          }
          this.listLoading = false
        })
        .catch(err => {
          this.$message.error(err)
          this.listLoading = false
        })
    },
    zoomImage(url) {
      this.showImage = true
      this.imageUrl = url
    },
    onVerify(scope, status) {
      if (status === '1' || status === '0') {
        this.list.splice(scope.$index, 1)
        xhrAnchorVerify({
          record: scope.row,
          status
        })
          .then(resp => {
            console.log('操作成功')
          })
          .catch(err => {
            console.log(err)
          })
      } else if (status === '2') {
        this.$prompt('请输入拒绝理由', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          // inputValue: 'avatar should be a picture of yourself(attractive!,clarity,no mask). input right gender, age and take a picture of yourself to verify'
        }).then(({ value }) => {
          xhrAnchorVerify({
            record: scope.row,
            reason: value,
            status
          })
            .then(resp => {
              this.$message.success('操作成功')
              this.list.splice(scope.$index, 1)
              console.log('操作成功')
            })
            .catch(err => {
              console.log(err)
              // this.$message.error(err)
            })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '取消输入'
          });
        });
      }
    },
    requestFullScreen() {
      // this.isFullScreen = true
      document.querySelector('.audit-box').requestFullscreen()
    },
    handleClick(tab) {
      switch (tab.name) {
        case 'second':
          this.$router.push('/anchor/anchor-audit')
          break
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.btn-box{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  button:first-child{
    margin-left: 10px;
  }
  button{
    margin-bottom: 5px;
  }
}
</style>
